<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>

  <body>
    <canvas id="myCanvas" width="800" height="800"></canvas>
    <script>
      var c = document.getElementById("myCanvas");
      var ctx = c.getContext("2d");
      const img = new Image();

      // const ctx2d = new Path2D();
      img.src = "../images/4.jpg";

      // const Chat = new Path2D(); //封装一个2D路径
      // // 聊天框
      // Chat.moveTo(200, 300);
      // Chat.quadraticCurveTo(150, 300, 150, 200);
      // Chat.quadraticCurveTo(150, 100, 300, 100);
      // Chat.quadraticCurveTo(450, 100, 450, 200);
      // Chat.quadraticCurveTo(450, 300, 250, 300);
      // Chat.quadraticCurveTo(250, 350, 150, 350);
      // Chat.quadraticCurveTo(200, 300, 200, 300);
      // ctx.clip(Chat); //Z走过的路径

      // img.onload = function () {
      //   ctx.drawImage(img, 0, -180, 800, 800);
      //   ctx.lineWidth = 20;
      //   ctx.stroke(Chat);
      // };

      // 像素操作
      //   其中包含Canvas画布部分或完整的像素点信息。
      img.onload=function(){
        ctx.drawImage(img, 0, 0, 800,800);

      }
      const imgdata= ctx.getImageData(0, 0, 800, 800);
      console.log(imgdata.data);
      for (let i = 0; i < imgdata.data.length; i += 4) {
        imgdata.data[i] = 255; //红色
        imgdata.data[i + 1] = 0;//绿色
        imgdata.data[i + 2] = 0;//蓝色
        imgdata.data[i + 3] = 255;//透明度
      }
    //   更新数据
    // imagedataObject
// 包含图像像素信息的ImageData对象。
// dxNumber
// 目标Canvas中被图像数据替换的起点横坐标。
// dyNumber
// 目标Canvas中被图像数据替换的起点纵坐标。
// dirtyX（可选）Number
// 图像数据渲染区域的左上角横坐标。默认值是0。
// dirtyY（可选）Number
// 图像数据渲染区域的左上角纵坐标。默认值是0。
// dirtyWidth（可选）Number
// 图像数据渲染区域的宽度。默认值是imagedata图像的宽度。
// dirtyHeight（可选）Number
// 图像数据渲染区域的高度。默认值是imagedata图像的高度。
      ctx.putImageData(imgdata, 100, 100,320,150,100,100);
    </script>
  </body>
</html>
